<template>
    <div>
        <div class="wares-text">大家都在看</div>
        <div class="wares">
            <div>
                <div class="waresbox">
                    <div v-for="(item,index) in 5" :key="index">
                        <img src="../assets/img/0FB.png" alt="">
                            <p>AHUIGGH</p>
                            <p>DUUIS 褶皱时尚手提包</p>
                            <p>￥8, 000</p>
                    </div>
                </div>

            </div>
            <i class="iconfont icon-left-line" @click="waresmove(1)"></i>
            <i class="iconfont icon-right-line" @click="waresmove(2)"></i>
        </div>

    </div>
</template>

<script>

export default {
    methods: {
        waresmove(i) {
            console.log(i)
            let box = document.getElementsByClassName('waresbox')[0]
            var a = 0
            a++
            if(i==1) {
                box.style.left = -250*a + 'px'
            }else {
                box.style.left = 250*a + 'px'
            }
        }
    },
}
</script>

<style lang='scss'>
.wares-text {
    font-size: 36px;
    text-align: center;
    margin-top: 116px;
}
.wares {
    height: 256px;
    margin-top: 39px;  
    position: relative;
    width: 1043px;
    overflow: hidden;
    >i {
        font-size: 24px;
        color: #000;
        font-weight: 800;
        cursor: pointer;
        position: absolute;
        top: 60px;
    }
    >i:nth-child(2) {
       left: 0;
       
    }   
    >i:nth-child(3) {
        right: 0;
    }   
    >div {
        width: 920px;
        height: 255px;
        overflow: hidden;
        position: relative;
        >.waresbox {
            position: absolute;
            top: 0;
            left: 0;
            height: 255px;
            display: flex;
            >div {
                width: 180px;
                margin-right:70px;
                >img {
                    width: 167px;
                    height: 167px;
                    vertical-align: top;
                    margin-bottom: 28px;
                }
                >p {
                    font-size: 14px;
                    text-align: center;
                    line-height: 20px;
                }
            }
        }
    }
}

</style>